body {
    margin          : 0;
    padding         : 0;
    font-family     : sans-serif;
    background-size : cover;
    background-image: url('../images/bg.jpg');
    height          : 100vh;
    width           : 100vw;
    display         : flex;
    justify-content : center;
    align-items     : center;
}

.box {
    padding      : 2%;
    height       : 50%;
    width        : 70%;
    background   : rgba(0, 0, 0, 0.6);
    box-sizing   : border-box;
    box-shadow   : 10px 10px 15px rgba(0, 0, 0, 0.5);
    border-radius: 10px;

}

/*@media (max-height:0px) {
    .box{
        height: 80%;
    }
}*/

form {
    width          : 100%;
    height         : 70%;
    display        : flex;
    justify-content: flex-start;
    flex-wrap      : wrap;
    align-content  : space-between;

}

.box h2 {
    color     : #fff;
    height    : 20%;
    padding   : 0;
    margin    : 0 0 10%;
    text-align: center;
}

.box .inputBox {
    width   : 100%;
    height: 30%;
    position: relative;
}

.box .inputBox input {
    width         : 100%;
    padding       : 1% 0;
    font-size     : 100%;
    color         : #fff;
    margin-bottom : 10%;
    outline       : none;
    border        : none;
    background    : transparent;
    border-bottom : 1px solid #fff;
    letter-spacing: 1px;
}

.box .inputBox label {
    position      : absolute;
    top           : -20%;
    left          : 0;
    font-size     : 100%;
    color         : #fff;
    padding       : 4% 0;
    pointer-events: none;
    transition    : 0.5s;
}

.box .inputBox input:focus~label,
.box .inputBox input:valid~label {
    top      : -70%;
    font-size: 80%;
    color    : #03a9f4;
}

input[type="button"] {
    height       : 20%;
    background   : transparent;
    border       : none;
    outline      : none;
    color        : #fff;
    background   : #03a9f4;
    padding      : 1.5% 3%;
    cursor       : pointer;
    border-radius: 5px;
    align-self   : flex-end;
}
